<template>
  <div class="student-list">
    <div class="title">
      <div class="block"></div>
      <div class="word">学生详情</div>
      <div class="button">

        <el-button class="el-button"
                   @click="refresh">刷新</el-button>

      </div>
    </div>
    <div class="student-detail">
      <div class="student-detail-avatarbox">
        <img class="student-detail-avatar"
             :src="avatar"
             alt="" />
        <div class="student-detail-avatar-name">
          {{ studentContent[0].content2 }}
        </div>
      </div>
      <div class="student-detail-contentbox">
        <div class="student-detail-content"
             v-for="(item, index) in studentContent"
             :key="index">
          <div class="student-detail-content-title">{{ item.title1 }}</div>
          <div class="student-detail-content-title-content">
            {{ item.content1 }}
          </div>
          <div class="student-detail-content-title">{{ item.title2 }}</div>
          <div class="student-detail-content-title-content">
            {{ item.content2 }}
          </div>
        </div>
      </div>
    </div>
    <div class="order-records">
      <div class="head">
        <img class="img"
             src="../../../assets/index/tag.png"
             alt="" />
        订单记录
      </div>
      <div class="datalist">
        <el-table class="el-table"
                  ref="multipleTable"
                  :data="tableData"
                  border
                  style="width: 100%">
          <el-table-column prop="orderId"
                           label="订单编号"> </el-table-column>
          <el-table-column prop="createTime"
                           label="提交时间">
          </el-table-column>
          <el-table-column prop="orderType"
                           label="订单类型"> </el-table-column>
          <el-table-column prop="amount"
                           label="订单金额"> </el-table-column>
          <el-table-column prop="paymentMethod"
                           label="支付方式">
          </el-table-column>
          <el-table-column prop="orderSource"
                           label="订单来源">
          </el-table-column>
          <el-table-column prop="statusName"
                           label="订单状态">
          </el-table-column>
          <el-table-column prop="operation"
                           label="操作">
            <template slot-scope="scope">
              <el-button type="text"
                         @click="handleClick(scope.row)"
                         size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging">
        <paging :total="total"
                @size="size"
                @currentpage="currentpage"></paging>
      </div>
    </div>
  </div>
</template>

<script>
import paging from "../../../component/paging/paging.vue";
import { getStudentOrderList, getStudentDetail } from "../../../api/index";

export default {
  inject: ['reload'],
  name: "studentList",
  components: {
    paging, //分页组件
  },

  data () {
    return {
      current: '',
      pagesize: '',
      total: 0,//一共多少条数据
      userId: "",
      tableData: [],
      avatar: "",
      studentContent: [
        { title1: "用户id", content1: "", title2: "姓名", content2: "" },
        { title1: "昵称", content1: "", title2: "性别", content2: "" },
        { title1: "手机号", content1: "", title2: "微信号", content2: "" },
        { title1: "邮箱", content1: "", title2: "注册时间", content2: "" },
        { title1: "用户来源", content1: "", title2: "注册来源", content2: "" },
        {
          title1: "是否需要顾问联系",
          content1: "",
          title2: "备注",
          content2: "",
        },
      ],
    };
  },

  mounted () {
    this.$emit('routeName', "studentDetail");

    // getStudentDetail();
    if (this.$route.params.userId) {
      this.userId = this.$route.params.userId;
      getStudentDetail(this.userId).then((res) => {
        const data = res.data;
        console.log(data);
        this.avatar = data.avatar;
        this.studentContent[0].content1 = data.userId;
        this.studentContent[0].content2 = data.nickname;

        this.studentContent[1].content1 = data.username;
        this.studentContent[1].content2 = data.gender;

        this.studentContent[2].content1 = data.phone;
        this.studentContent[2].content2 = data.wechat;

        this.studentContent[3].content1 = data.email;
        this.studentContent[3].content2 = data.createTime;

        this.studentContent[4].content1 = data.userSource;
        this.studentContent[4].content2 = data.registrationSource;
        
        if(data.consultantContact === true) this.studentContent[5].content1 = '是';
        else this.studentContent[5].content1 = '否'
        
        this.studentContent[5].content2 = data.description;
      });
      console.log(this.$route.params.userId);
      // console.log(this.current,this.pagesize,this.userId);
      this.getList()
    }
  },
  methods: {
    getList () {
      getStudentOrderList(this.current, this.pagesize, this.userId).then((data) => {
        console.log(data);
        this.tableData = data.data.records;
        this.total = data.data.total
      });
    },
    currentpage (val) {
      // console.log(val);
      this.current = val //得到新的当前页
      this.getList() //获取新的数据列表
    },
    size (val) {
      // console.log(val);
      this.pagesize = val //得到新当前页的一共几行数据
      this.getList() //获取新的数据列表
    },
    refresh () {
      this.reload()
    },
  },
};
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 30px;
}
.img {
  width: 30px;
  height: 30px;
}

.student-detail {
  display: flex;
  width: 100%;
  height: 300px;
  margin-top: 20px;
  background-color: white;
  border: 1px solid #ccc;
}

.student-detail .student-detail-avatarbox {
  position: relative;
  width: 20%;
  height: 100%;
  border-right: 1px solid #ccc;
  text-align: center;
}

.student-detail-avatarbox .student-detail-avatar {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-top: 50px;
}

.student-detail-contentbox {
  width: 80%;
  height: 100%;
}

.student-detail .student-detail-content {
  display: flex;
  width: 100%;
  height: 16.4%;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.student-detail-content .student-detail-content-title-content {
  width: 450px;
  height: 100%;
  border-right: 1px solid #ccc;
  line-height: 50px;
  padding-left: 10px;
  overflow: hidden;
}

.student-detail-content .student-detail-content-title {
  text-align: center;
  line-height: 50px;
  width: 250px;
  /* height: 99%; */
  background-color: #f9fafc;
  border-right: 1px solid #ccc;
  font-size: 14px;
  overflow: hidden;
}

.order-records {
  width: 100%;
  height: auto;
  margin-top: 20px;

  background-color: white;
  border: 1px solid #ccc;
}
.head {
  padding-top: 20px;
  padding-left: 20px;
  color: #666666;
  font-size: 20px;
}
.datalist {
  padding-top: 20px;
  padding-left: 30px;
}
.paging {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
</style>
